import React, { Component, PropTypes } from 'react'
import { TabBar } from '../footer'
import { hashHistory } from 'react-router'
import { AccountHeader, AccountItem } from './'
import { myFetch, helper, config } from '../utils'
import { Modal, Toast } from 'antd-mobile'

const dataArr = [
  {
    value: '账户情况',
    link: '/account/detail',
    imgUrl: 'icon1.png'
  },
  {
    value: '我认购的项目',
    link: '/account/subscription',
    imgUrl: 'icon2.png',
    status: true
  },
  {
    value: '关注的项目',
    link: '/account/follow',
    imgUrl: 'icon3.png'
  },
  {
    value: '银行卡',
    link: '/account/binding',
    imgUrl: 'icon4.png'
  },
  {
    value: '我的邀请人',
    link: '/account/inviter',
    imgUrl: 'icon5.png'
  },
  {
    value: '注销',
    imgUrl: 'icon1.png',
    logout: true,
  }
]

export default  class AccountPage extends Component {
  constructor() {
    super()
    this.state = {
      numOfBoughtProjects: 0,
      totalAmountOfBought: 0,
      balance: 0,
      bankCard: null,
      mobileNumber: null
    }
    this.onFetchData = this.onFetchData.bind(this)
    this.logout = this.logout.bind(this)
  }
  onFetchData() {
    myFetch(`${config.rootApi}/user/profile`, {}, true)
    .then((rs) => {
      this.setState(rs)
    })
  }

  logout() {
    const options = {
      method: 'POST',
      body: ''
    }
    myFetch(`${config.rootApi}/user/logout`, options, true, false)
      .then((rs) => {
        Toast.success('注销成功！', 1.2, () => {
          sessionStorage.removeItem('token')
          hashHistory.push('/')
        })
      })
  }
  componentDidMount() {
    this.onFetchData()
  }
  render() {
    console.log(this.state)
    const {numOfBoughtProjects, totalAmountOfBought, balance} = this.state
    return (
      <div className="rt-account-container">
        <AccountHeader />
        <AccountItem data={{num: numOfBoughtProjects, price: balance, amount: totalAmountOfBought}} />
        <div className="cm-scrollable-container cm-margin-bottom20">
          {
            dataArr.map((val, index) => {
              return (
                <div
                  className={`-account-row`}
                  onClick={() => {
                    if (val.logout) {
                      const alert = Modal.alert
                      alert('注销登录', '确认退出当前帐号 ???', [
                        { text: '取消', onPress: () => console.log('cancel') },
                        { text: '确定', onPress: () => this.logout() },
                      ])
                      return
                    }
                    hashHistory.push(`${val.link}`)
                  }}
                  key={index}
                >
                  <div className={`-left-side`}>
                    <img src={require(`../../statics/images/${val.imgUrl}`)}/>
                    <span>{val.value}</span>
                  </div>
                  <div className={`-right-side`}>
                    <img src={require('../../statics/images/right.png')}/>
                  </div>
                </div>
                )
            })
          }
        </div>
        <TabBar activeIndex={3} />
      </div>
      )
  }
}